<template lang="html">
    <div id="login-page">
        <div class="login-form">
            <div class="input-group">
                <div class="title">福清餐饮食品安全监管网</div>
                <el-input :autofocus="true" placeholder="请输入用户名" v-model="formName.username" @blur="inputBlur('username',formName.username)"></el-input>
            </div>
            <div class="input-group">
                <el-input placeholder="请输入密码" type="password" v-model="formName.password" @blur="inputBlur('password',formName.password)"></el-input>
            </div>
            <div class="input-group">
                   <el-checkbox v-model="rememberMe">记住密码？</el-checkbox>
            </div>
            <div class="input-group">
                <el-button @click="submitForm(formName)" type="primary" :loading="isBtnLoading">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import {
        requestLogin,GetTocken
    } from '../../api/api';
    
    export default {
        name: '',
        data() {
            return {
                formName: { //表单中的参数
                    username: '',
                    password: '',
                },
                beDisabled: null,
                rememberMe: false,
                isBtnLoading: false,
                beShow: false //传值给父组件
            };
        },
        created() {
                this.MakeToken();
             let auth = JSON.parse(localStorage.getItem('rememberMeauth'));
            if (auth) {
                this.formName.username = auth.loginname;
                this.formName.password = auth.password;
                this.rememberMe = true;
            }
            if(this.formName.password==null){
                 this.rememberMe = false;
            }
        },
        //方法
        methods: {
             MakeToken: function() {
                let options = {
                    params: {
                        ids: 'b03a09737621419d933724788abd33fa'
                    }
                }
                GetTocken(options).then((res) => {
                    let token = res.data
                    if (res.success == true) {
                        localStorage.setItem('tokendata', JSON.stringify({
                            token: res.data,
                        }));
                        return
                    }
                })
            },
            resetForm: function() {
                this.formName.username = '';
                this.formName.password = '';
            },
            submitForm: function(formName) {
                let options = {
                    params: {
                        loginname: this.formName.username,
                        password: this.formName.password,
                        ip: "",
                        deviceid: ""
                    }
                };
                requestLogin(options).then((res) => {
                    if (res.success === true) {
                        localStorage.setItem('auth', JSON.stringify({
                            loginname: this.formName.username,
                            password: this.formName.password,
                            UserUnid: res.data.user.unid,
                            enterpriseUnid: res.data.enterprise.unid,
                            enterpriseName: res.data.enterprise.name,
                        }));
                         if (this.rememberMe) {
                            localStorage.setItem('rememberMeauth', JSON.stringify({
                             loginname: this.formName.username,
                             password: this.formName.password
                            }));
                        }
                        this.$router.push({
                            name: 'Index'
                        })
                    } else {
                        this.$message.error(res.msg);
                        resetForm();
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    #login-page {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url('../../img/bg.jpg') no-repeat #efeeee;
        background-size: cover;
        .login-form {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 85%;
            height: auto;
            border-radius: 10px;
            background: white;
            border: 1px #eaeaea solid;
            box-shadow: 0px 0px 25px #cac6c6;
            .title {
                color: #20a0ff;
                font-weight: bold;
                font-size: 1rem;
                text-align: center;
                line-height: 2.2;
                font-family: sans-serif;
                color: #008b3e;
                margin-bottom: 20px
            }
            .input-group {
                margin-top: 20px;
                width: 80%;
                button {
                    width: 100%;
                    margin-bottom: 25px;
                    background: #008c3f;
                    background: -webkit-gradient(linear, left top, left bottom, from(#019e47), to(#00823a));
                    background: -moz-linear-gradient(top, #019e47, #00823a);
                    color: #fff;
                    border-color: #008c3f;
                }
            }
        }
    }
</style>
